<template>
  <view class="film-success">
    <view class="success-header">
      <h1><uni-icons type="checkbox" color="#f00" size="24" style="margin-right: 16rpx;"></uni-icons>{{filmTxt}}</h1>
      <view class="com-list">
        <view class="list-name">手机号码：</view>
        {{info.mobile}}
      </view>
      <view class="com-list">
        <view class="list-name">手机类型：</view>
        {{info.phoneType}}
      </view>
      <view class="com-list">
        <view class="list-name">营业厅：</view>
        <view style="text-align: right;">{{info.name}} <br> {{info.address}}</view>
      </view>
      <view class="com-list">
        <view class="list-name">预约时间：</view>
        <strong>{{info.appointmentTime}}</strong>
      </view>
      <view class="header-code">
        <view class="code-image" v-if="!info.writeOffStatus">
          <view class="image-qrcode">
            <tki-qrcode v-if="info.qrCodeUrl" :showLoading="false" ref="qrcode" :val="info.qrCodeUrl || 'http://www.chinaunicom.com.cn/'" :loadMake="true" :size="500" :onval="true" />
          </view>
          <tki-barcode v-if="info.qrCodeUrl" :showLoading="false" ref="barcode" :val="info.qrCodeUrl||'http://www.chinaunicom.com.cn/'" :opations="opations" :onval="true" />
        </view>
        <view class="code-info">
          <view>预约码：{{info.appointmentCode}}</view>
          {{info.writeOffStatus?'已使用':info.isOverTime?'已超时':'待使用'}}
        </view>
      </view>
    </view>
    
    <uni-popup ref="warring" type="center" :mask-click="false">
      <view class="warring-popup">
        <view class="warring-main">
          <h2>温馨提醒</h2>
          <h3>您未预约,请先预约</h3>
          <image class="main-img" src="@/static/images/info.png" mode="widthFix"></image>
          <button class="main-button" @click="handleToFilm">去预约</button>
        </view>
      </view>
    </uni-popup>
    
    <receive-gift :sign="sign" :phone="mobile"></receive-gift>
    
    <adsense :phone="mobile"></adsense>
  </view>
</template>

<script>
  import adsense from '@/components/adsense.vue'
  import receiveGift from '@/components/receive-gift.vue'
  import {getQueryString} from '@/utils/Tools.js'
  import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
  import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
  import point from '@/network/point.js'
  const Vconsole = require('@/utils/vconsole.min.js')
  export default {
    components:{adsense,receiveGift,tkiQrcode,tkiBarcode},
    data() {
      return {
        sign:'',
        mobile:'',
        opations:{
          displayValue:false,
          height: 42
        },
        info:{},
        timer:'',
        filmTxt:'预约失败'
      };
    },
    onLoad() {
      // const con = new Vconsole();
      this.sign = getQueryString("sign");
      this.mobile = getQueryString("desmobile") || getQueryString("mobile");
      this._getInfo()
      this.timer = setInterval(_=>{
        if(getApp().globalData.ip){
          point({
            action_code:"910000003",//对照表填 必须传
            action_type:"enter",//对照表填 必须传
            source_url: "910000000", //对照表填 必须传
            present_url: "910000000",//对照表填 必须传
            params: [{
              k: "active_id",  //必须传
              v: "tmhd",
            },
            {
              k: "user_phone", //必须传
              v: this.mobile,
            },
            {
              k: "user_ip",  // 必须传
              v: getApp().globalData.ip,
            }
          ]})
          clearInterval(this.timer)
        }
      },1000)
    },
    methods:{
      handleToFilm(){
        uni.navigateTo({
          url:'/pages/index/index'
        })
      },
      ///         network
      async _getInfo(){  ///  获取预约信息
        uni.showLoading({
          title:'加载中...'
        })
        const res = await this.$get(`/screen/appointment/getByMobile?sign=${this.sign}&mobile=${this.mobile}`,'','1')
        if(res.code == 200){
          this.info = res.data || {}
          this.filmTxt = '预约成功'
        }else if(res.code == 1003){
          this.$refs.warring.open();
        }else{
          uni.showToast({
            title:res.msg,
            icon:'none'
          })
        }
      }
    }
  }
</script>

<style lang="less">
.film-success{
  padding: 22rpx 32rpx;
  .success-header{
    border-radius: 20rpx;
    background: #fff;
    padding: 27rpx 32rpx;
    margin-bottom: 24rpx;
    h1{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 38rpx;
      color: #222;
      margin-bottom: 42rpx;
    }
    .com-list{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      line-height: 42rpx;
      font-size: 28rpx;
      margin-bottom: 42rpx;
      strong{
        color: #f00;
        font-weight: 400;
      }
    }
    
    .header-code{
      border-top: .5px solid #ccc;
      .code-image{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24rpx 32rpx;
        .image-qrcode{
          width: 250rpx;
          height: 250rpx;
          margin-right: 10rpx;
          ::v-deep.tki-qrcode uni-image{
            width: 250rpx!important;
            height: 250rpx!important;
          }
        }
        ::v-deep.tki-barcode{
          width: 42rpx!important;
          height: 250rpx!important;
        }
        ::v-deep.tki-barcode uni-image{
          transform: rotate(90deg);
          transform-origin: top left;
          width: 250rpx!important;
          position: absolute;
          left: 42rpx;
          top: 0;
        }
      }
      .code-info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #222;
      }
    }  ///  .header-code end
  } // .success-header end 

}
</style>
